<template>
  <transition name="vipdiaog" enter-to-class="animate__animated animate__fadeInDownBig" leave-to-class="animate__animated animate__fadeOutUpBig">
  <div class="wrapper " v-show="showModal">
    <div class="header vip">
      <div class="close-link">
        <nuxt-link to="javascript:void(0);"  @click.prevent="handleClose">
          <n-icon size="24px">
            <close></close>
          </n-icon>
        </nuxt-link>
      </div>
      <div class="mod_user">
        <div class="thumb"><img
            v-lazy="userInfo.avatar"
            class="thumb_pic"><i class="icon icon_wechat"></i></div>
        <div class="info">
          <div class="info_inner"><h4 class="title"> 升级账号 <span class="name">{{ userInfo.nickname }}</span>
            <span></span></h4></div>
          <div class="info_inner cf">
            <div class="desc">
              <strong>当前身份：</strong><ksd-vip-flag :viptype="userInfo.vipFlag"></ksd-vip-flag><span v-if="userInfo.vipFlag > 1">({{userInfo.vipDays}}天)，<strong>VIP到期时间：</strong>{{formatTimeToStr(userInfo.vipTime)}}</span>
            </div>
            <div class="action_wp flex align-center">
              <span class="nav-i red" title="客服" >
                遇到问题？加客服微信【xuchengfeifei】
              </span>
            </div>
          </div>
        </div>
      </div>
      <a class="btn btn_close"
         dt-params="e_module_type=default&amp;business=hollywood&amp;mod_id=vip_card&amp;mod_title=%E5%A4%B4%E9%83%A8%E5%8D%A1%E7%89%87&amp;btn_title=%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE&amp;f_type=4"
         dt-eid="close" dt-keep-report="true"><i class="icon icon_close"></i></a></div>
    <div class="content">
      <div class="combo_page">
        <div class="mod_tab_wrap">
          <div class="mod_tab_cont vip">
            <div class="products flex_v_h products-vip">
              <div class="product-container">
                <div class="product-list">
                  <div class="vu-scroll-wrapper product-scroll product-scroll--vip">
                    <div class="vu-scroll-content"
                         style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-property: transform; transition-duration: 0ms; transform: translateX(0px) translateY(0px) translateZ(1px);">
                      <div class="vu-scroll-list-wrapper" style="min-height: 0px; pointer-events: auto;">
                        <div class="product-list-container">
                          <ul class="product-list">
                            <li v-for="(item,index) in userVipList" :key="item.id" class="product-item"
                                :class="[cardIndex == index ? 'product-item--active':'']"
                                @click="handleChangeVip(index,item)"
                            >
                              <h3 class="product-item__title"> {{item.title}} </h3>
                              <h2 class="product-item__price">
                                <span class="symbol">¥</span>
                                <span class="number">{{item.price}}</span>
                              </h2>
                              <h4 class="product-item__ext-desc">{{ (item.price / item.vipDays).toFixed(2)  }}元/天</h4>
                              <h6 class="product-item__promo-label mb10"> {{item.note}} </h6>
                              <template v-for="bitem in item.benefitsIds">
                                <span v-if="bitem.title=='项目实战'" class="mt1 fw">{{bitem.title}}：{{item.discount}}折</span>
                                <span v-if="bitem.title=='高薪陪跑班'" class="mt1 fw">{{bitem.title}}：{{item.discount}}折</span>
                                <span v-else class="mt1">{{bitem.title}}</span>
                              </template>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="pay-panel">
              <div class="mod_pay">
                <ul class="pay_bar">
                  <li class="item item1" :class="[payMethod=='weixin'?'current':'']" @click="handleChangePay('weixin')"><svg t="1702991384189" class="icon" style="position: relative;left:-8px;" viewBox="0 0 1144 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4283" width="18" height="18"><path d="M436.314353 632.771765c-68.517647 36.321882-78.667294-20.389647-78.667294-20.389647l-85.835294-190.524236c-33.039059-90.533647 28.581647-40.839529 28.581647-40.839529s52.856471 38.038588 93.003294 61.229176c40.086588 23.190588 85.835294 6.806588 85.835294 6.806589l561.212235-246.362353C936.899765 80.112941 765.891765 0 572.235294 0 256.180706 0 0 213.232941 0 476.310588c0 151.311059 84.811294 285.967059 216.937412 373.248l-23.792941 130.288941s-11.625412 38.038588 28.611764 20.389647c27.437176-12.047059 97.370353-55.115294 138.992941-81.347764 65.445647 21.684706 136.734118 33.731765 211.486118 33.731764 316.024471 0 572.235294-213.232941 572.235294-476.310588 0-76.197647-21.594353-148.178824-59.843764-212.028235-178.808471 102.309647-594.733176 340.118588-648.312471 368.489412z" fill="#43C93E" p-id="4284"></path></svg><span class="txt">微信支付</span></li>
                  <li class="item item1" :class="[payMethod=='alipay'?'current':'']" @click="handleChangePay('alipay')"><svg t="1702991419981" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5478" width="20" height="20"><path d="M896 650.666667l-247.04-83.072s18.986667-28.416 39.253333-84.138667c20.266667-55.722667 23.168-86.314667 23.168-86.314667l-159.914666-1.28V341.162667l193.706666-1.365334V301.226667h-193.706666V213.333333H456.533333v87.893334H275.882667v38.613333l180.693333-1.28v58.581333H311.637333v30.592h298.325334s-3.285333 24.832-14.72 55.722667a1254.485333 1254.485333 0 0 1-23.210667 57.941333s-140.074667-49.024-213.888-49.024-163.584 29.653333-172.288 115.712c-8.661333 86.016 41.813333 132.608 112.938667 149.76 71.125333 17.237333 136.789333-0.170667 193.962666-28.16 57.173333-27.946667 113.28-91.477333 113.28-91.477333l287.914667 139.818667A142.08 142.08 0 0 1 753.792 896H270.208A142.08 142.08 0 0 1 128 754.048V270.208A142.08 142.08 0 0 1 269.952 128h483.84A142.08 142.08 0 0 1 896 269.952v380.714667z m-360.064-48.128s-89.856 113.493333-195.754667 113.493333c-105.941333 0-128.170667-53.930667-128.170666-92.714667 0-38.741333 22.016-80.853333 112.170666-86.954666 90.069333-6.101333 211.84 66.176 211.84 66.176h-0.085333z" fill="#02A9F1" p-id="5479"></path></svg><span class="txt">支付宝支付</span></li>
                  <li class="item item1" :class="[payMethod=='code'?'current':'']" @click="handleChangePay('code')"><svg t="1702991757997" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6658" width="24" height="24"><path d="M503.7056 513.1264m-450.816 0a450.816 450.816 0 1 0 901.632 0 450.816 450.816 0 1 0-901.632 0Z" fill="#FFE1E9" p-id="6659"></path><path d="M503.7056 183.3984c-182.0672 0-329.728 147.6096-329.728 329.728 0 182.0672 147.6096 329.728 329.728 329.728s329.728-147.6096 329.728-329.728c-0.0512-182.1184-147.6608-329.728-329.728-329.728zM671.8976 624.64H452.3008l33.4336 55.4496-61.3888 37.0176-86.9888-144.2304c-5.2736-8.7552 1.024-19.9168 11.264-19.9168h323.2768v71.68z m-13.1072-142.592H335.4624v-71.68h219.5968l-33.4336-55.4496 61.3888-37.0176 86.9888 144.2304c5.2736 8.7552-1.024 19.9168-11.2128 19.9168z" fill="#FF3369" p-id="6660"></path><path d="M746.7008 384.0512c0-36.8128-4.4544-72.6016-12.8-106.9056-59.4432-58.0096-140.5952-93.7984-230.1952-93.7984-182.0672 0-329.728 147.6096-329.728 329.728 0 143.6672 91.9552 265.8304 220.16 310.9888 201.728-44.8 352.5632-224.768 352.5632-440.0128z m-411.2384 26.3168h219.5968l-33.4336-55.4496 61.3888-37.0176 86.9888 144.2304c5.2736 8.7552-1.024 19.9168-11.264 19.9168H335.4624v-71.68zM348.6208 552.96h323.2768v71.68H452.3008l33.4336 55.4496-61.3888 37.0176-86.9888-144.2304c-5.2736-8.7552 1.024-19.9168 11.264-19.9168z" fill="#FF4D7C" p-id="6661"></path><path d="M173.9776 513.1264c0 57.9072 15.0016 112.3328 41.216 159.6416a448.1536 448.1536 0 0 0 155.904-43.9808l-33.7408-55.9104c-5.2736-8.7552 1.024-19.9168 11.264-19.9168h132.096c22.8352-21.4016 43.4688-45.1584 61.4912-70.912H335.4624v-71.68h219.5968l-33.4336-55.4496 61.3888-37.0176 21.4528 35.5328c12.288-41.0112 18.8928-84.48 18.8928-129.4848 0-6.0928-0.1536-12.1856-0.4096-18.2272a328.48384 328.48384 0 0 0-119.296-22.3232c-182.0672 0-329.6768 147.6096-329.6768 329.728z" fill="#FF5F89" p-id="6662"></path><path d="M174.2848 500.3776a449.96096 449.96096 0 0 0 161.1776-79.7184v-10.24H348.16C417.6896 352.256 469.4016 273.5616 494.0288 183.6544c-173.3632 5.0176-313.1392 143.7696-319.744 316.7232z" fill="#FF7196" p-id="6663"></path></svg><span class="txt">兑换码支付</span></li>
                </ul>
                <div class="pay_figure" v-if="payMethod!='code'">
                  <div class="figure">
                    <div class="figure_pic_wp">
                      <div class="figure_pic_inner"><n-image :src="payCodeUrl" width="220" height="240"/></div>
                    </div>
                  </div>
                  <div class="detail">
                    <div class="price">
                      {{payMethod=='weixin'?'微信':'支付宝'}}扫码，支付<strong class="strong">{{payMoeny}}</strong><span class="txt">元</span>
                    </div>
                    <div class="desc"> 登录账号：<span class="name">{{ userInfo.nickname }}</span></div>
                    <div class="agreement"><span class="txt">开通前阅读并同意</span><a href="/page/userxieyi.html" target="_blank" title="同学你好系列会员服务协议"><span class="txt">《同学你好系列会员服务协议》 </span></a><a href="/page/yinsi.html" target="_blank"><span class="txt">《隐私政策》</span></a></div>
                  </div>
                </div>
                <div class="detailx" v-if="payMethod=='code'">
                  <div class="flex justify-center flex-col   mt-5" style="padding: 40px 40px 40px;">
                     <div class="flex" style="width: 100%">
                       <n-input v-model:value="code" :on-blur="handleQueryCodeInfo" placeholder="请输入20位兑换码" maxlength="20" min="20" max="20"></n-input>
                       <n-button class="ml-2" @click="handleDuiHuanCode" :disabled="btnSure" type="success">{{!btnSure?'确认兑换':'兑换'}}</n-button>
                     </div>
                    <div class="mt-5" v-if="cardDetail.id">兑换卡信息：{{cardDetail.title}}，VIP类型是：<ksd-vip-flag :viptype="cardDetail.vipType"></ksd-vip-flag></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </transition>
  <div class="jsao_overlay" v-show="showModal"></div>
</template>
<script setup>
// 二维码生成器
import QRCode from 'qrcode'
const showModal = ref(false)
const userVipList = ref([])
const cardIndex = ref(0)
const payMoeny = ref(99)
const payVip = ref(0)
const code = ref("")
const benefitsIds = ref([])
// 默认图的设置，防止出现裂图
const payCodeUrl = ref("/imgs/1px.png")
const payMethod = ref('weixin')
const payData = ref({})
// 兑换卡信息
const cardDetail = ref({})
const btnSure = ref(true)
// 支付的时长，单位是秒
const payTotalTimer = 300
const userInfo = ref({})
const payCount = ref(payTotalTimer)
// 支付轮询定时器
let payTimer = null
// 支付时间计数的定时器
let payCountTimer = null

// 改变vip
const handleChangeVip = (index,item) => {
  if(userInfo.value.vipFlag == 7){
    useMessage().warning("已经是SVIP，无需在升级身份!!!")
    return;
  }
  if(cardIndex.value == index)return;
  cardIndex.value = index
  payVip.value = item.id
  payMoeny.value = item.price
  benefitsIds.value = item.benefitsIds
  if(payMethod.value == "weixin") {
    handleCreateNativeWeixin()
  }else if(payMethod.value == "alipay") {
    handleCreateNativeAlipay()
  }else{

  }
}

// 改变支付方式
const handleChangePay = (item) => {
  if(userInfo.value.vipFlag == 7){
    // 保证每次都是从180开始
    payCount.value = payTotalTimer
    // 这两行代码是把原来开启的定时器关闭，保证每次支付都是最新的状态，（清楚旧的定时器，保证每次都是最新状态）
    if (payTimer) clearInterval(payTimer)
    if (payCountTimer) clearInterval(payCountTimer)
    useMessage().warning("已经是超级，无需在升级身份!!!")
    return;
  }
  if(payMethod.value == item)return;
  payMethod.value = item
  if(payMethod.value == "weixin") {
    handleCreateNativeWeixin()
  }else if(payMethod.value == "alipay") {
    handleCreateNativeAlipay()
  }else{
    // 保证每次都是从180开始
    payCount.value = payTotalTimer
    // 这两行代码是把原来开启的定时器关闭，保证每次支付都是最新的状态，（清楚旧的定时器，保证每次都是最新状态）
    if (payTimer) clearInterval(payTimer)
    if (payCountTimer) clearInterval(payCountTimer)
  }
}

// 打开支付窗口
const handleOpen = () => {
  useLoginDialog().then(async ()=>{
    showModal.value = true
    if (payTimer) clearInterval(payTimer);
    if (payCountTimer) clearInterval(payCountTimer);
    payCount.value = payTotalTimer
    useLoadUserGetApi().then(async resp=>{
      userInfo.value = resp.data
      await handleLoadVipList()
      if(resp.data.vipFlag!=7) {
        await handleCreateNativeWeixin()
      }else{
        useMessage().warning("已经是SVIP，无需在升级身份!!!")
      }
    })
  })
}

// 关闭
const handleClose = ()=>{
  showModal.value = false
  // 生成和创建课程的微信支付二维码
  if (payTimer) clearInterval(payTimer);
  if (payCountTimer) clearInterval(payCountTimer);
  payCount.value = payTotalTimer
  code.value = ""
}

// 加载vip列表信息
const handleLoadVipList = async () => {
    try {
      await useIsLoginPromise()
      const resp = await useFindUserVipListApi()
      if (resp.data) {
        userVipList.value = resp.data
        payMoeny.value = resp.data[cardIndex.value].price
        benefitsIds.value = resp.data[cardIndex.value].benefitsIds
        payVip.value = resp.data[cardIndex.value].id
      }
    }catch (e) {

    }
}

// 生成课程的支付二维码
const handleCreateNativeWeixin = async () => {
  try {
    payMethod.value = "weixin"
    // 根据课程id获取下单的微信支付地址
    const resp = await useCreateNativeVipApi(payVip.value,payMethod.value,"vip")
    // 获取服务端支付信息包括：微信支付地址，业务订单编号和状态success
    payData.value = resp.data
    // 生成二维码
    const qrCodeResp = await QRCode.toDataURL(resp.data.url, {
      width: 220,
      height: 240,
      margin: 2
    })
    // 把生成好的二维码的二进制的字符串赋值给状态数据管理payCodeUrl
    payCodeUrl.value = qrCodeResp
    // 保证每次都是从180开始
    payCount.value = payTotalTimer
    // 这两行代码是把原来开启的定时器关闭，保证每次支付都是最新的状态，（清楚旧的定时器，保证每次都是最新状态）
    if (payTimer) clearInterval(payTimer)
    if (payCountTimer) clearInterval(payCountTimer)
    // 开始查询, 这里立即执行一次，去查询用户是否支付和购买此课程
    handleListenerPaySuccess()
    payTimer = setInterval(handleListenerPaySuccess, 3000)
    // 时间计数倒计时
    payCountTimer = setInterval(handleListenerTime, 1000)
  } catch (e) {
    if (payTimer) clearInterval(payTimer)
    if (payCountTimer) clearInterval(payCountTimer)
    payCodeUrl.value = ""
    payCount.value = 0
    useMessage().error(e.message)
  }
}

// 生成课程的支付二维码
const handleCreateNativeAlipay = async () => {
  try {
    payMethod.value = "alipay"
    // 根据课程id获取下单的微信支付地址
    const resp = await useCreateNativeVipApi(payVip.value,payMethod.value,"vip")
    // 获取服务端支付信息包括：微信支付地址，业务订单编号和状态success
    payData.value = resp.data
    // 生成二维码
    const qrCodeResp = await QRCode.toDataURL(resp.data.url, {
      width: 220,
      height: 240,
      margin: 2
    })
    // 把生成好的二维码的二进制的字符串赋值给状态数据管理payCodeUrl
    payCodeUrl.value = qrCodeResp
    // 保证每次都是从180开始
    payCount.value = payTotalTimer
    // 这两行代码是把原来开启的定时器关闭，保证每次支付都是最新的状态，（清楚旧的定时器，保证每次都是最新状态）
    if (payTimer) clearInterval(payTimer)
    if (payCountTimer) clearInterval(payCountTimer)
    // 开始查询, 这里立即执行一次，去查询用户是否支付和购买此课程
    handleListenerPaySuccess()
    payTimer = setInterval(handleListenerPaySuccess, 3000)
    // 时间计数倒计时
    payCountTimer = setInterval(handleListenerTime, 1000)
  } catch (e) {
    if (payTimer) clearInterval(payTimer)
    if (payCountTimer) clearInterval(payCountTimer)
    payCodeUrl.value = ""
    payCount.value = 0
    useMessage().error(e.message)
  }
}

// 支付查单
const handleListenerPaySuccess = async () => {
  try {
    await useFindNativeByTradeNoVipApi(payData.value.tradeNo,payVip.value,payMethod.value,"vip")
    useMessage().success("用户升级成功,点击前往个人中心查看身份!")
    if (payTimer) clearInterval(payTimer);
    if (payCountTimer) clearInterval(payCountTimer);
    payCount.value = payTotalTimer
    // 关闭定时器
    setTimeout(() => {
      window.location.reload()
    }, 600)
  } catch (e) {
    if (e.code == 902) {
      useMessage().error(e.message)
      handleClose()
    }
  }
}

// 时间计数器
const handleListenerTime = () => {
  payCount.value--
  if (payCount.value == 0) {
    // 关闭支付
    handleClose()
  }
}

// 根据code查询兑换卡信息
const handleQueryCodeInfo = async ()=> {
  if (!code.value) {
    useMessage().error("请输入兑换码!")
    return
  }
  try {
    const resp = await useQueryUserVipApi(code.value)
    cardDetail.value = resp.data
    btnSure.value = false
  }catch (e) {
    useMessage().error(e.message)
  }
}

// 身份兑换
const handleDuiHuanCode = async () => {
  if (!code.value) {
    useMessage().error("请输入兑换码!")
    return
  }
  try {
    await useDuhuanUserVipApi(code.value)
    btnSure.value = true
    code.value = ""
    useMessage().success("兑换成功")
    setTimeout(() => {
      window.location.reload()
    }, 600)
  }catch (e) {
    useMessage().error(e.message)
  }
}

defineExpose({
  handleOpen,
  handleClose
})
</script>

<style scoped>
.wrapper {
  width: 826px;
  position: fixed;
  left: 50%;
  top: 45%;
  background-color: #fff;
  margin-left: -413px;
  margin-top: -380px;
  z-index: 10000;
  border-radius: 8px;
  box-shadow: 0 0 1em #ccc;
  padding-bottom: 10px;
}
.close-link{position: absolute;top:6px;right:5px;z-index: 1000;display: none}
.wrapper:hover .close-link{display: block}
.jsao_overlay{
  position: fixed;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background:rgba(255,255,255,0.78)
}
.header {
  position: relative;
  height: 68px;
  background: url() 0 0 no-repeat;
  background-size: 100% 100%;
  border-radius: 8px;
  color: #d99900;
}
.header .mod_user {
  height: 100%;
  position: relative;
  padding: 0 0 0 21px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.header .mod_user .thumb {
  position: relative;
  float: left;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e0b45d;
}

.header .mod_user .thumb_pic {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.header .mod_user .thumb .icon {
  position: absolute;
  right: -2px;
  bottom: -2px;
}

.header .mod_user .info {
  margin-left: 20px;
}

.header .mod_user .info .title {
  font-size: 16px;
  line-height: 22px;
}

.header .mod_user .info .title .name {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  vertical-align: top;
  line-height: 22px;
  color: #663d00;
}

.header .mod_user .info .desc {
  line-height: 20px;
  font-size: 13px;
}

a {
  color: #663d00;
}


.header .mod_user .info .action_wp {
  position: absolute;
  right: 20px;
  bottom: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.header .mod_user .info .action {
  display: inline-block;
  font-size: 0;
  margin-right: 11px;
}

.header .mod_user .info .action .icon {
  vertical-align: middle;
  margin-right: 6px;
}

.icon_exchange {
 background-position: -85px -93px;
 width: 20px;
 height: 21px;
}

.header .mod_user .info .action.child2 {
  padding-left: 13px;
  border-left: 1px solid rgba(210,135,18,.2);
}

.header .mod_user .info .action {
 display: inline-block;
 font-size: 0;
 margin-right: 11px;
}

.header .mod_user .info .action .icon {
  vertical-align: middle;
  margin-right: 6px;
}

.icon_gift {
 background-position: -75px -114px;
 width: 19px;
 height: 19px;
}

.header .mod_user .info .action .txt {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
}
.mod_tab_wrap {
  padding: 0 22px;
}

.product-container {
  position: relative;
}

.product-container .product-list {
  position: relative;
  flex-wrap: nowrap;
  justify-content: space-between;
  display: flex;
  width: 782px;
}

.product-list {
 position: relative;
 list-style: none;
 white-space: nowrap;
 padding: 14px 0 8px;
 text-align: center;
}

.vu-scroll-wrapper {
  position: relative;
  height: 100%;
  overflow: hidden;
}
product-scroll .vu-scroll-content {
  display: inline-block;
}

.vu-scroll-content {
 position: relative;
 z-index: 1;
}

.vu-scroll-list-wrapper {
  overflow: hidden;
}

.product-list {
 position: relative;
 list-style: none;
 white-space: nowrap;
 padding: 14px 0 0;
 text-align: center;
}
.product-scroll.product-scroll--vip .product-list li.product-item.product-item--active {
  background: no-repeat 100% 100%/40px 60px url(https://vip.image.video.qpic.cn/vupload/20221228/5b07a41672728622429.png) #fff9e7;
}


 .product-container .product-list li.product-item {
   width: 49%;
   height: 458px;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding-top: 30px;
   -webkit-box-shadow: none;
   box-shadow: none;
   border-width: 2px;
   cursor: pointer;
 }
 .product-list li.product-item--active {
   background: #fff9e7;
   border: 1px solid #ebc96a;
   -webkit-box-shadow: 0 2px 4px 1px rgba(255,205,85,.2);
   box-shadow: 0 2px 4px 1px rgba(255,205,85,.2);
 }
 .product-list li.product-item {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   position: relative;
   width: 109px;
   height: 130px;
   background: #fff;
   border: 1px solid #ebebeb;
   border-radius: 8px;
   padding-top: 23px;
   -webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,.04), 0 -2px 8px 0 rgba(0,0,0,.04);
   box-shadow: 0 2px 6px 0 rgba(0,0,0,.04), 0 -2px 8px 0 rgba(0,0,0,.04);
 }


.product-container .product-list li.product-item .product-item__title {
  font-size: 18px;
  font-weight: 600;
}
 .product-list li.product-item--active .product-item__title {
   font-weight: 500;
 }
 .product-list li .product-item__title {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: center;
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
   color: #000028;
 }
.product-list li .product-item__price {
  text-align: center;
  font-weight: 500;
  color: #f8b514;
  font-size: 0;
}
.product-list li .product-item__price .symbol {
  font-size: 13px;
  margin: 15px 2px 0 -3px;
}

.product-list li .product-item__price>* {
 display: inline-block;
 vertical-align: middle;
}

.product-list li .product-item__price .number {
  font-size: 32px;
}

.product-list li .product-item__price>* {
 display: inline-block;
 vertical-align: middle;
}

.product-list li .product-item__ext-desc, .product-list li .product-item__original-price {
  color: #a2a2b6;
}

.product-list li .product-item__ext-desc, .product-list li .product-item__original-price, .product-list li .product-item__voucher {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 width: 100%;
 line-height: 18px;
 font-size: 13px;
 font-weight: 400;
 text-align: center;
 margin-top: 2px;
}

.product-container .product-list li.product-item .product-item__promo-label {
  border-radius: 8px 0 8px 0;
  font-size: 14px;
  height: 22px;
  line-height: 22px;
  left: -2px;
  top: -10px;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.product-list li.product-item--active .product-item__promo-label {
 left: -1px;
 top: -1px;
}

.product-list li .product-item__promo-label {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 position: absolute;
 top: 0;
 left: 0;
 background-color:#24be48;
 color: #fff;
 padding: 0 6px;
 border-radius: 16px 0;
 height: 28px;
 line-height: 28px;
 font-size: 20px;
 font-weight: 400;
 -ms-transform: scale(.5);
 transform: scale(.5);
 -webkit-transform-origin: left top;
 -ms-transform-origin: left top;
 transform-origin: left top;
 text-align: center;
 max-width: 180px;
 margin: 0;
}

.product-desc {
  color: #848494;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: left;
  padding: 0 8px 0 16px;
  height: 17px;
}

.pay-panel {
  height: 208px;
  position: relative;
  margin-top: 20px;
}

.pay-panel .mod_pay {
  margin-top: 0;
}

.mod_pay {
 position: relative;
 margin-top: 20px;
 height: 194px;
 border: 2px solid #f0f0f0;
 border-radius: 12px;
}

.mod_pay .pay_figure {
  margin-left: 199px;
  margin-top: 25px;
}

.mod_pay .pay_figure .figure {
  float: left;
  text-align: center;
}

.mod_pay .pay_figure .figure_pic_wp {
  border: 2px solid #f0f0f0;
  width: 148px;
  height: 148px;
  position: relative;
}

.mod_pay .pay_figure .figure_pic {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

.mod_pay .pay_figure .detail {
  margin: 20px 0 0 175px;
  font-weight: 600;
}

.mod_pay .pay_figure .price {
  font-size: 16px;
  color: #222;
}

.mod_pay .pay_figure .detail .pay_method {
  color: #000028;
  font-size: 16px;
  line-height: 20px;
}

.mod_pay .pay_figure .detail .pay_method img {
  margin-right: 3px;
  vertical-align: initial;
  display: inline-block;
}

.mod_pay .pay_figure .price .strong {
  font-size: 36px;
  font-weight: 700;
  color: #000028;
  margin: 0 5px;
}

.mod_pay .pay_figure .price .txt {
  color: #666;
}

.mod_pay .pay_figure .desc, .mod_pay .pay_figure .desc_time {
  font-size: 16px;
  color: #222;
}

.mod_pay .pay_figure .name {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  vertical-align: top;
}

.mod_pay .pay_figure .detail .agreement .txt {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  color: #979797;
}

.mod_pay .pay_figure .detail .agreement a {
  margin-top: 8px;
}

.mod_pay .pay_bar {
  float: left;
  width: 142px;
  height: 100%;
}
.mod_pay .pay_bar .item:first-of-type {
  border-radius: 10px 0 0 0;
}

 .mod_pay .pay_bar .item.current {
   background-color: #fff;
   border-right: none;
 }

 .mod_pay .pay_bar .item {
   justify-content: center;
   align-items: center;
   display: flex;
   width: 100%;
   height: 64px;
   line-height: 64px;
   font-size: 0;
   text-align: center;
   cursor: pointer;
   background-color: #f0f0f0;
   border: solid #e6e6e6;
   border-width: 0 1px 1px 0;
 }
.mod_pay .pay_bar .item .icon {
  vertical-align: middle;
  margin-right: 8px;
}
 .icon_wechat {
   background-position: -93px -22px;
   width: 20px;
   height: 20px;
 }

.mod_pay .pay_bar .item .txt {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  font-weight: 700;
  color: #222;
}

</style>